<template>
  <div class="CommMessage">
    <div class="CommMessage-nav">
      <div
        v-for="(item, index) in navList"
        :key="index"
        @click="changNav(index)"
        :class="{ activenavs: indexs == index }"
      >
        {{ item }}
      </div>
    </div>

    <div class="commentarea" v-if="!noliu" v-loading="loading">
      <ul>
        <li class="huiline" v-for="(item, index) in totalComments" :key="index">
          <div class="commentarea-item">
            <div class="ctuser-img">
              <img :src="item.uimg" alt="" />
            </div>
            <div class="cttext">
              <div class="ctarea-name">{{ item.uname }}</div>
              <div>
                <xing-4 :giScore="item.cscore"></xing-4>
              </div>
              <div class="ctarea-text">
                {{ item.ccontent }}
              </div>

              <div class="ctarea-bottom">
                <div class="ctarea-one">{{ item.cstatetime }}</div>
                <div class="ctarea-tow">
                  <div class="dianxi">
                    <img
                      v-if="!item.state"
                      @click="getdian(item.cid, item.state)"
                      src="../../../../assets/img/ndianz.svg"
                      alt=""
                    />
                    <img
                      v-else
                      @click="getdian(item.cid, item.state)"
                      src="../../../../assets/img/dianz.svg"
                      alt=""
                    />
                    <span>{{ item.cnumber }}</span>
                  </div>
                  <div class="shu2">|</div>
                  <div class="huifu" @click="displayReply(index)">
                    <img src="../../../../assets/img/hui.svg" alt="" />
                    <span>回复</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="reply">
            <comm-reply
              :cid="item.cid"
              :pianduan="pianduan"
              v-on:changPuan="changPuan"
            ></comm-reply>
            <div
              class="reply-message"
              :class="{ fabuactive: index == indexR && pianduan == 1 }"
            >
              <el-input
                ref="huifus"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6 }"
                placeholder="请输入"
                v-model="textarea"
              >
              </el-input>

              <div class="fabu" @click="fabu(item.cid)">发布</div>
            </div>
          </div>
        </li>
      </ul>

      <div class="totalfy">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totals"
          :page-size="10"
          :currentPage="curPage"
          @current-change="page"
        >
        </el-pagination>
      </div>
    </div>

    <div class="noliu" v-else>
      <img src="../../../../assets/img/noliu.svg" alt="" />
      <div>暂无留言</div>
    </div>
  </div>
</template>

<script>
import Xing4 from "../../../../components/ximg/xing4.vue";
import {
  fabulous,
  commentNew,
  commentHot,
  addGamereview,
} from "../../../../network/showGame";
import CommReply from "./commReply";

export default {
  components: { CommReply, Xing4 },
  name: "CommMessage",

  data() {
    return {
      navList: ["默认", "|", "最热"],
      totals: 5,
      curPage: 1,
      indexs: 0,
      indexR: -1,
      totalComments: "",
      textarea: "",
      pianduan: 1,
      gid: window.location.pathname.split("/")[2],
      uid: this.$Cookie.get("userid"),
      noliu: false,
      loading: true,
    };
  },
  created() {
    this.getCommentNew();
  },

  computed: {
    monitor() {
      return this.$store.state.userGame;
    },
  },

  watch: {
    monitor() {
      this.getCommentNew().then((res) => {
        console.log(res);
      });
    },
  },

  methods: {
    changNav(index) {
      this.indexs = index;
      if (index == 0) {
        this.getCommentNew();
      } else {
        commentHot(this.gid, 1, this.uid).then((res) => {
          this.totalComments = res.data.data.list;
          console.log(this.totalComments);
        });
      }
    },

    displayReply(index) {
      this.indexR = index;
      this.pianduan = 1;
      this.textarea = "";
      this.$nextTick(() => {
        this.$refs.huifus[0].focus();
      });
    },

    changPuan(value) {
      this.pianduan = value;
    },

    getCommentNew() {
      commentNew(this.gid, this.curPage, this.uid).then((res) => {
        this.totalComments = res.data.data.list;
        this.totals = res.data.data.total;
        this.$store.commit("changState3");
        if (this.totals === 0) {
          this.noliu = true;
        } else {
          this.noliu = false;
        }
        this.loading = false;
      });
    },

    page(currentPage) {
      this.curPage = currentPage;
      this.getCommentNew();
      this.indexR = -1;
    },

    getdian(cid, state) {
      if (state) {
        state = false;
      } else if (!state || state == null) {
        state = true;
      }
      if (this.uid == null) {
        this.$confirm("用户未登录,是否进行登录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/login2");
          })
          .catch(() => {});
      } else {
        fabulous(cid, this.gid, state, this.uid).then((res) => {
          console.log(res);
          this.getCommentNew();
        });
      }
    },

    fabu(cid) {
      if (this.uid == null) {
        this.$confirm("未登录,是否进行登录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/login2");
          })
          .catch(() => {});
      } else {
        addGamereview(cid, this.gid, this.textarea, "", this.uid).then(
          (res) => {
            this.getCommentNew();
            this.$store.commit("changState3");
            this.indexR = -1;
            console.log(res);
          }
        );
      }
    },
  },
};
</script>

<style>
.CommMessage {
  width: 100%;
  margin-top: 0.15rem;
}

.CommMessage-nav {
  display: flex;
  font-size: 0.1rem;
  color: rgb(71, 70, 70);
  border-bottom: 1px solid rgb(202, 200, 198);
  padding-bottom: 0.15rem;
}

.CommMessage-nav div {
  margin-right: 0.12rem;
}

.CommMessage-nav div:nth-child(1):hover,
.CommMessage-nav div:nth-child(3):hover,
.CommMessage-nav div:nth-child(5):hover {
  color: rgb(123, 206, 239);
  cursor: pointer;
}

.CommMessage-nav div:nth-child(2),
.CommMessage-nav div:nth-child(4) {
  color: rgb(197, 197, 201);
}

.activenavs {
  color: rgb(123, 206, 239);
}

.commentarea {
  margin-top: 0.15rem;
}

.commentarea ul {
  list-style: none;
}

.commentarea-item {
  display: flex;
  margin-top: 0.3rem;
}

.huiline {
  border-bottom: 1px solid rgb(173, 172, 172);
  padding-bottom: 0.2rem;
}

.ctuser-img {
  flex: 0.6;
}

.ctuser-img img {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
}

.cttext {
  flex: 9.4;
}

.ctarea-name {
  font-size: 0.1rem;
  margin-bottom: 0.05rem;
  font-weight: bold;
}

.ctarea-text {
  font-size: 0.1rem;
  margin-top: 0.08rem;
}

.cttext img {
  width: 0.12rem;
  height: 0.12rem;
}

.ctarea-bottom {
  display: flex;
  align-items: center;
  margin-top: 0.15rem;
}

.ctarea-one {
  flex: 1;
  font-size: 0.08rem;
  color: rgb(197, 197, 201);
}

.ctarea-tow {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.08rem;
  color: rgb(197, 197, 201);
}

.shu2 {
  margin-right: 0.08rem;
  margin-left: 0.08rem;
}

.dianxi {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dianxi span {
  margin-left: 0.02rem;
  margin-top: 0.02rem;
}

.huifu {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.reply {
  width: 93%;
  margin-left: 0.6rem;
  margin-top: 0.2rem;
}

.reply-item {
  display: flex;
  margin-top: 0.2rem;
}

.reply-img {
  flex: 0.6;
}

.reply-img img {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
}

.reply-bottom {
  flex: 9.4;
}

.reply-name {
  font-size: 0.09rem;
  font-weight: bold;
  margin-bottom: 0.05rem;
}

.reply-text {
  font-size: 0.09rem;
  margin-bottom: 0.05rem;
}

.reply-some {
  display: flex;
  align-items: center;
  font-size: 0.08rem;
  color: rgb(197, 197, 201);
}

.reply-time {
  flex: 1;
}

.reply-caoz {
  display: flex;
  flex: 1;
  align-content: center;
  justify-content: flex-end;
}

.reply-dian {
  display: flex;
  align-content: center;
  cursor: pointer;
  font-size: 0.08rem;
}

.reply-hui {
  display: flex;
  align-content: center;
  cursor: pointer;
}

.reply-dian img,
.reply-hui img {
  width: 0.12rem;
  height: 0.12rem;
  transform: translateY(-10%);
}

.fenye {
  margin-top: 0.2rem;
}

.reply-message {
  width: 70%;
  margin-top: 0.1rem;
  display: none;
}

.fabu {
  width: 0.4rem;
  height: 0.1rem;
  line-height: 0.1rem;
  text-align: center;
  font-size: 0.12rem;
  padding: 0.05rem 0.05rem 0.05rem 0.05rem;
  background-color: rgb(35, 173, 229);
  color: #fff;
  border-radius: 5px;
  margin-left: 90%;
  margin-top: 0.1rem;
  cursor: pointer;
}

.fabuactive {
  display: block;
}

.totalfy {
  margin-top: 0.2rem;
  text-align: center;
}

.nonefy {
  display: none;
}

.noliu {
  width: 100%;
  text-align: center;
  font-size: 0.12rem;
  letter-spacing: 10px;
}

.noliu img {
  width: 20%;
}
</style>